import React, {FC, useEffect, useState} from 'react';
import {Image, StyleSheet, useWindowDimensions} from 'react-native';
type PropsType = {
  uri: string;
};
const ResizeImage: FC<PropsType> = (props: PropsType) => {
  const {uri} = props;
  const {width: SCREEN_WIDTH} = useWindowDimensions();
  const [heightImg, setHeightImg] = useState<number>(100);
  const SHOW_WIDTH = (SCREEN_WIDTH - 18) / 2;
  useEffect(() => {
    Image.getSize(uri, (width: number, height: number) => {
      const showHeight = (SHOW_WIDTH * height) / width;
      setHeightImg(showHeight);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [uri]);
  const styles = StyleSheet.create({
    img: {
      width: SHOW_WIDTH,
      height: heightImg,
      resizeMode: 'cover',
    },
  });
  return <Image source={{uri}} style={styles.img} />;
};

export default ResizeImage;
